<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>玉灵 QQ:7031633 Email:webrx@126.com</title>
    <style>
        .box {
            width: 400px;
            height: 200px;
            border: 1px solid rgb(221, 221, 221);
        }

        .box .circle {
            width: 50px;
            height: 50px;
            background-color: #f00;
            border-radius: 50%;
            animation: mm 2s linear 0s alternate infinite forwards;
        }

        @keyframes mm {
            0% {
                transform: translateX(0);
            }
            25% {
                transform: translateX(350px);
            }

            50% {
                transform: translate(350px, 150px) scale(.5, .5);
            }

            75% {
                transform: translate(0px, 150px);
            }

            100% {
                transform: translate(0px, 0px);
            }


        }
    </style>
</head>

<body>
<div class="box">
    <div class="circle"></div>
</div>
</body>
</html>
